<template>
	<div class="authentication">
		<div class="authenticationHraders flex">
			<span>我的认证</span>
			<el-button @click="$router.push('/addresslist/interior/addauthentication')" type="primary" v-has="'修改认证'">修改认证</el-button>
		</div>
		<div class="authenticationContent">
			<div class="contentHeader">我的基本信息</div>
			<div class="basicInformation flex">
				<el-form :model="pageData" class="demo-form-inline" label-width="10rem">
					<el-form-item label="姓名：">
						<el-input v-model="pageData.name" disabled placeholder="姓名"></el-input>
					</el-form-item>
					<el-form-item label="平台编号：">
						<el-input v-model="pageData.jobNumber" :disabled="true" placeholder="平台编号"></el-input>
					</el-form-item>
					<el-form-item label="联系电话：">
						<el-input v-model="pageData.phone" disabled maxlength="11" placeholder="联系电话"></el-input>
					</el-form-item>
				</el-form>
				<div>
					<el-image :src="pageData.head?pageData.head:$globalData.defaultImg" class="avatar avatar-uploader" fit="cover"></el-image>
				</div>
			</div>
			<div class="contentHeader">身份认证信息</div>
			<div class="basicInformation">
				<el-form :model="pageData" class="demo-form-inline" label-width="10rem">
					<el-form-item label="身份证号：">
						<el-input v-model="pageData.cardId" disabled maxlength="18" placeholder="身份证号"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="basicInformation flex" style="padding-left: 10rem;">
				<div>
					<!-- <el-image :src="pageData.cardFront?pageData.cardFront:require('@/assets/image/working/front.png')" fit="cover"
						:preview-src-list="[pageData.cardFront?pageData.cardFront:require('@/assets/image/working/front.png')]"
					 class="InformationImgs"></el-image> -->
					 <img :src="pageData.cardFront?pageData.cardFront:require('@/assets/image/working/front1.png')" class="InformationImgs" alt="">
				</div>
				<div>
					<!-- <el-image :src="pageData.cardReverse?pageData.cardReverse:require('@/assets/image/working/reverse.png')" fit="cover"
					 class="InformationImgs"></el-image> -->
					 <img :src="pageData.cardReverse?pageData.cardReverse:require('@/assets/image/working/reverse1.png')" class="InformationImgs" alt="">
				</div>
				<div>
					<!-- <el-image :src="pageData.holdingCard?pageData.holdingCard:require('@/assets/image/working/hand.png')" fit="cover"
					 class="InformationImgs"></el-image> -->
					 <img :src="pageData.holdingCard?pageData.holdingCard:require('@/assets/image/working/hand1.png')" class="InformationImgs" alt="">
				</div>
			</div>
			<div class="InformationUploadTip">为更好的服务，身份证件仅仅用作验证用户真实性，其他用户不可下载，查看及复制</div>
			<!-- <div class="contentHeader">职级、岗位信息</div> -->
			<div class="contentHeader">岗位信息</div>
			<div class="basicInformation">
				<el-form :model="pageData" class="demo-form-inline" label-width="10rem">
					<el-form-item label="我的岗位：">
						<div class="customBox flex">
							<!-- {{pageData.postEntityList && pageData.postEntityList.length > 0?'1':'0'}} -->
							<div v-if="pageData.postEntityList && pageData.postEntityList.length > 0">
								<el-tag class="isTagList" size=" " type="info" v-for="(tag, index) in pageData.postEntityList"
								 :key="index" :disable-transitions="false">
									{{tag.labelName}}
								</el-tag>
							</div>
							
							<el-button disabled v-else class="button-new-tag" size="" type="text">暂无岗位</el-button>
						</div>
					</el-form-item>
					<!-- <el-form-item label="我的职级：">
						<div class="customBox flex">
							<el-tag class="isTagList" size=" " type="info" v-if="pageData.rankNameEntityList" :disable-transitions="false">
								{{pageData.rankNameEntityList.departmentName?pageData.rankNameEntityList.departmentName:''}}
							</el-tag>
							<el-button disabled v-else class="button-new-tag" size="" type="text">暂无职级</el-button>
						</div>
					</el-form-item> -->
				</el-form>
			</div>
			<!-- <div class="basicInformation flex" style="padding-left: 10rem;" v-if="pageData.rankNameEntityList">
				<div class="rankPhotos flex">
					<div v-for="(rankPhoto, index) in pageData.rankNameEntityList.rankPhotosEntityList" class="rankPhotosListBox">
						<img :src="rankPhoto.picture?rankPhoto.picture:$globalData.defaultImg" :key="rankPhoto.id" class="InformationImgs" alt="">
					</div>
				</div>
			</div> -->
			<div class="InformationUploadTip"></div>
			<div class="contentHeader">我服务的范围</div>
			<div class="basicInformation">
				<el-form :model="pageData" class="demo-form-inline" label-width="10rem" style="width: 100%;">
					<el-form-item label="服务范围：">
						<div v-if="pageData.areaEntityList && pageData.areaEntityList.length > 0">
							<div class="myAddressList" v-for="(aaddress, index) in pageData.areaEntityList" :key="aaddress.id">
								<span class="aaddressSpan">{{aaddress.addressId}}</span>
							</div>
						</div>
						
						<el-button disabled v-if="!pageData.areaEntityList || pageData.areaEntityList.length == 0"
						 class="button-new-tag" size="" type="text">暂无地址</el-button>

					</el-form-item>
				</el-form>
			</div>
			<div class="contentHeader" style="margin-top: 60px;">我的入职记录</div>
			<div class="entryRecord">
				<el-table :data="pageData.companyEntityList" border style="width: 100%">
					<el-table-column prop="startTime" label="入职时间"></el-table-column>
					<el-table-column prop="outTime" label="离职时间"></el-table-column>
					<el-table-column prop="companyName" label="团队及部门"></el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pageData: {},
				// addressList: [],
				userId: '',
				// 地址四级联动
				// addressListData: {
				// 	myAddressListDataId: [], //已有和添加的数据ID
				// 	myAddressListDataName: []
				// }
			}
		},
		created() {
			// 页面始化设置左边导航栏状态
			this.$store.commit('set_myManagementNavIndex', 14)
		},
		mounted() {
			this.userId = this.$store.state.user.userInfo.id
			this.getAuthenticationDetail()
		},
		methods: {
			getAuthenticationDetail() {
				// 获取用户认证信息
				this.$request.postForm(this.$api.getDetails, {
					userId: this.userId
				}).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						// let addressArryData = this.pageData.areaEntityList
						// addressArryData.forEach((v, i) => {
						// 	this.addressListData.myAddressListDataId.push(v.addressId.split(','))
						// 	let addressListDataText = []
						// 	v.addressId.split(',').forEach((n, s) => {
						// 		setTimeout(() => {
						// 			this.useIdQueryAddress(n, (text) => {
						// 				addressListDataText.push(text)
						// 			})
						// 		}, s * 100)
						// 	})
						// 	this.addressListData.myAddressListDataName.push(addressListDataText)
						// })
					}
				})
			},
			// useIdQueryAddress(id, callBack) {
			// 	// 使用id查询地址
			// 	if (id) {
			// 		this.$request.postForm(this.$api.getAddressName, {
			// 			id: id
			// 		}).then(res => {
			// 			if (res.code == 200) {
			// 				callBack(res.data)
			// 			}
			// 		})
			// 	}

			// }
		}
	}
</script>

<style scoped="scoped">
	.authenticationHraders {
		padding: 10px 20px;
		background: #FFFFFF;
		border-bottom: 1px solid #DCDCDC;
		justify-content: space-between;
		align-items: center;
	}

	.flex {
		display: flex;
		flex-wrap: nowrap;
	}

	.authenticationHraders span {
		color: #131313;
		font-size: 20px;
	}

	.authenticationContent {
		padding: 20px;
		background: #FFFFFF;
	}
/* 
	.contentHeader {
		color: #333333;
		font-size: 16px;
		position: relative;
		width: 115px;
		text-align: right;
	}

	.contentHeader::after {
		content: '';
		width: 710px;
		top: 50%;
		border-bottom: 1px dotted #DCDCDC;
		position: absolute;
		left: 135px;
	} */
.contentHeader{
		width: 100%;
		padding: 10px 20px;
		color: #333333;
		font-size: 16px;
		background: #F3F3F3;
		margin-bottom: 20px;
	}
	.basicInformation {
		justify-content: space-between;
		margin-top: 25px;
	}

	.rankPhotos {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.rankPhotosListBox {
		margin-right: 15px;
		position: relative;
	}

	.deleteRankPhoto {
		color: darkred;
		position: absolute;
		top: -10px;
		right: -10px;
		z-index: 5;
		font-size: 24px;
		cursor: pointer;
		background: #fff;
		border-radius: 100%;
	}

	.demo-form-inline {
		width: 65%;
	}

	.basicInformation>>>.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader {
		border: 1px dotted #DCDCDC;
		border-radius: 5px;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}

	.InformationImgs {
		width: 210px;
		height: 138px;
		border-radius: 10px;
		border: 1px dotted #DCDCDC;
		overflow: hidden;
	}
	.InformationImgs>>>..el-image__inner--center {
		width: 100% !important;
		height: 100% !important;
	}
	.InformationUploadTip {
		padding-left: 10rem;
		color: #AAAAAA;
		font-size: 12px;
		margin-top: 10px;
		margin-bottom: 60px;
	}

	.materials {
		width: 210px;
		height: 138px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		border: 1px solid #DCDCDC;
	}

	.materials .avatar-uploader-icon {
		width: 100%;
		height: 50px;
	}

	.materials p {
		width: 100%;
		color: #AAAAAA;
		font-size: 12px;
	}

	.entryRecord {
		margin-top: 30px;
		padding-left: 13.5rem;
	}

	.isTagList {
		margin-right: 10px;
	}

	.allAddressBox {
		justify-content: space-between;
		flex-wrap: nowrap;
		width: 675px;
	}

	.allAddressBox .el-select {
		margin-right: 10px;
		width: 300px;
	}

	.customBox {
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 670px;
	}

	.isTagList,
	.button-new-tag {
		margin-bottom: 10px;
	}

	.myAddressList {
		color: #C0C4CC;
		width: 680px;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		margin-bottom: 10px;
		padding: 0 10px;
		font-size: 12px;
		position: relative;
		background: #F5F7FA;
	}

	.deleteAddressIcon {
		color: darkred;
		cursor: pointer;
		font-size: 14px;
		position: absolute;
		top: 10px;
		right: 10px;
		bottom: 10px;
		margin: auto;
	}

	.aaddressSpan {
		position: relative;
		padding-left: 10px;
		margin-left: 8px;
	}

	.aaddressSpan::before {
		position: absolute;
		content: '/';
		left: 0;
		color: #606266;
	}

	.aaddressSpan:first-child {
		padding-left: 0;
		margin-left: 0;
	}

	.aaddressSpan:first-child::before {
		display: none;
	}
</style>
